In Next.js release 14, Server Actions have reached stability, making them arguably the most efficient method for handling data operations, particularly data mutation, without the need to create a backend API. Instead, you can achieve this by employing functions that are accessible exclusively on the server, and as I understand it, these functions are translated into an API during the build process.

What are Server Actions

Server Actions are a new feature introduced in Next.js 13. With Server Actions, you can effortlessly modify data on the server directly from the frontend, eliminating the necessity for an extra API layer and streamlining the data mutation process.

These Server Actions are constructed on the foundation of React Actions, offering a seamless mechanism to execute code on the server in response to user actions on the client. For instance, you can process form submissions by triggering server-side code, enhancing the interactivity and efficiency of your web applications.

Server Actions offer various capabilities, including the ability to:

• Execute server logic in response to client actions, such as sending emails, accessing files, and creating logs.
• Access external services and APIs without the need to write additional API endpoints.
• Safely read and write to databases by executing code exclusively on the server.

In this tutorial, we will explore these features by building a CRUD app, utilizing Server Actions exclusively.

Building the app

What we are going to build

We will code a CRUD app for a two fields contact list, using only Server Actions, both for reading and writing data. The app, even if not optimized for production, it’s fully functional and include a lot of features (including pagination, error handling, no reload update and more) and is a good starting point to implement, for example, backend services to manage content.